/*
 * @Description: 新闻骨架屏
 * @Author: seadon
 * @LastEditors: seadon
 * @Date: 2021-07-22 11:55:34
 * @LastEditTime: 2021-07-23 18:41:03
 */
import { defineComponent } from 'vue'
import { ContentLoader } from 'vue-content-loader'

const CategorySkeleton = defineComponent({
	name: 'category-skeleton',
	render() {
		return (
			<ContentLoader viewBox="0 0 950 80">
				<rect x="0" y="20" rx="3" ry="3" width="950" height="25" />
				<rect x="0" y="55" rx="3" ry="3" width="615" height="25" />
			</ContentLoader>
		)
	},
})

const ListSkeleton = defineComponent({
	name: 'list-skeleton',
	render() {
		return (
			<ContentLoader viewBox="0 0 950 340">
				<rect x="0" y="25" rx="3" ry="3" width="255" height="25" />
				<rect x="0" y="65" rx="3" ry="3" width="225" height="77" />
				<rect x="241" y="65" rx="3" ry="3" width="225" height="77" />
				<rect x="482" y="65" rx="3" ry="3" width="225" height="77" />
				<rect x="723" y="65" rx="3" ry="3" width="225" height="77" />
				<rect x="0" y="155" rx="3" ry="3" width="225" height="77" />
				<rect x="241" y="155" rx="3" ry="3" width="225" height="77" />
				<rect x="482" y="155" rx="3" ry="3" width="225" height="77" />
				<rect x="723" y="155" rx="3" ry="3" width="225" height="77" />
				<rect x="0" y="245" rx="3" ry="3" width="225" height="77" />
				<rect x="241" y="245" rx="3" ry="3" width="225" height="77" />
				<rect x="482" y="245" rx="3" ry="3" width="225" height="77" />
			</ContentLoader>
		)
	},
})

const TableSkeleton = defineComponent({
	name: 'list-skeleton',
	render() {
		return (
			<ContentLoader viewBox="0 0 950 340">
				<rect x="0" y="25" rx="3" ry="3" width="255" height="25" />
				<rect x="0" y="65" rx="3" ry="3" width="218" height="25" />
				<rect x="220" y="65" rx="3" ry="3" width="438" height="25" />
				<rect x="660" y="65" rx="3" ry="3" width="178" height="25" />
				<rect x="840" y="65" rx="3" ry="3" width="110" height="25" />
				<rect x="0" y="95" rx="3" ry="3" width="218" height="25" />
				<rect x="220" y="95" rx="3" ry="3" width="438" height="25" />
				<rect x="660" y="95" rx="3" ry="3" width="178" height="25" />
				<rect x="840" y="95" rx="3" ry="3" width="110" height="25" />
				<rect x="0" y="125" rx="3" ry="3" width="218" height="25" />
				<rect x="220" y="125" rx="3" ry="3" width="438" height="25" />
				<rect x="660" y="125" rx="3" ry="3" width="178" height="25" />
				<rect x="840" y="125" rx="3" ry="3" width="110" height="25" />
				<rect x="0" y="155" rx="3" ry="3" width="218" height="25" />
				<rect x="220" y="155" rx="3" ry="3" width="438" height="25" />
				<rect x="660" y="155" rx="3" ry="3" width="178" height="25" />
				<rect x="840" y="155" rx="3" ry="3" width="110" height="25" />
				<rect x="0" y="185" rx="3" ry="3" width="218" height="25" />
				<rect x="220" y="185" rx="3" ry="3" width="438" height="25" />
				<rect x="660" y="185" rx="3" ry="3" width="178" height="25" />
				<rect x="840" y="185" rx="3" ry="3" width="110" height="25" />
				<rect x="0" y="215" rx="3" ry="3" width="218" height="25" />
				<rect x="220" y="215" rx="3" ry="3" width="438" height="25" />
				<rect x="660" y="215" rx="3" ry="3" width="178" height="25" />
				<rect x="840" y="215" rx="3" ry="3" width="110" height="25" />
				<rect x="0" y="245" rx="3" ry="3" width="218" height="25" />
				<rect x="220" y="245" rx="3" ry="3" width="438" height="25" />
				<rect x="660" y="245" rx="3" ry="3" width="178" height="25" />
				<rect x="840" y="245" rx="3" ry="3" width="110" height="25" />
				<rect x="0" y="275" rx="3" ry="3" width="218" height="25" />
				<rect x="220" y="275" rx="3" ry="3" width="438" height="25" />
				<rect x="660" y="275" rx="3" ry="3" width="178" height="25" />
				<rect x="840" y="275" rx="3" ry="3" width="110" height="25" />
				<rect x="0" y="305" rx="3" ry="3" width="218" height="25" />
				<rect x="220" y="305" rx="3" ry="3" width="438" height="25" />
				<rect x="660" y="305" rx="3" ry="3" width="178" height="25" />
				<rect x="840" y="305" rx="3" ry="3" width="110" height="25" />
			</ContentLoader>
		)
	},
})

export { CategorySkeleton, ListSkeleton, TableSkeleton }
